@import url(public.css);
@import url(basic.css);

.container .top-warrper {
    margin-top: 4.5rem;
    height: 6rem;
}

.container .search-bar {
    position: relative;
}

.container .search-bar input {
    width: 26.5rem;
    height: 3.6rem;
    border-radius: 1rem;
    background-color: var(--main-gray-9);
    color: var(--main-black-4);
    padding-left: 3.5rem;
    margin-left: 5rem;
}

.container .search-bar .me-back,
.container .search-bar .me-search,
.container .search-bar .me-option,
.container .search-bar .me-car {
    width: 2.4rem;
    height: 2.3rem;
    position: absolute;
    top: .8rem;
}

.container .search-bar .me-back {
    background: url(../img/chevron-left.png) no-repeat;
    background-position-x: left;
    left: 2rem;
}

.container .search-bar .me-search {
    background: url(../img/search.png) no-repeat;
    left: 5.8rem;
}

.container .search-bar .me-option {
    background: url(../img/Group.png) no-repeat;
    right: 6.5rem;
}

.container .search-bar .me-car {
    background: url(../img/car.png) no-repeat;
    right: 2rem;
}

.container .search-bar .me-car.active::after {
    position: absolute;
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: .3rem;
    background: var(--main-red);
    top: 0rem;
    right: 0rem;
}

.container .context-warrper {
    width: 100%;
    padding: 2rem;
}

.container .me-type {
    position: relative;
    width: 45rem;
    height: 9rem;
}

.container .me-type::after {
    position: absolute;
    content: "";
    bottom: -1rem;
    left: -2.5rem;
    width: 100%;
    height: .1rem;
    background-color: var(--main-gray);
}

.container .me-type .box {
    position: relative;
    margin-right: 2.6rem;
    float: left;
    text-align: center;
}

.container .me-type .box.active::after {
    position: absolute;
    content: "";
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: .5rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    background-color: var(--main-color-2);
}

.container .me-type .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.3rem;
    height: 5.3rem;
    background-color: var(--main-color-green-2);
    border-radius: 1.5rem;
}

.container .context-warrper .product-list {
    margin-top: 2rem;
}

.container .product-list .item {
    position: relative;
    margin-top: 2rem;
    width: 15.7rem;
    height: 25.1rem;
    float: left;
    border-radius: 1rem;
    box-shadow: 0 3px 6px var(--main-black-1);
}

.product-list .item .img-box {
    width: 100%;
    height: 13.1rem;
}

.product-list .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list .item .context {
    padding: .5rem;
    line-height: 2.5rem;
    font-weight: 500;
    color: var(--main-gray);
}

.product-list .item .context p {
    text-indent: 1em;
    line-height: 0rem;
    text-decoration: line-through;
}

.product-list .item .context h1 {
    text-indent: 1em;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--main-black-4);
}

.product-list .item .context h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--main-color-2);
}

.product-list .item .context h3 span {
    font-size: 1rem;
    font-weight: normal;
    color: var(--main-gray);
}

.product-list .item label input[type="checkbox"] {
    display: none;
}

.product-list .item label {
    position: absolute;
    padding: .5rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    border: .2rem solid var(--main-color-2);
    bottom: 1rem;
    right: 1rem;
}

.product-list .item .me-puls::after,
.product-list .item .me-puls::before {
    position: absolute;
    content: "";
    background-color: var(--main-color-2);
    bottom: 1.1rem;
    right: .2rem;
    width: 80%;
    border-radius: .2rem;
    height: .25rem;
    transition: all .2s ease-in-out;
}

.product-list .item .me-puls::before {
    transition-delay: .2s;
    transform: rotate(90deg);
}

.product-list .item label input[type="checkbox"]:checked+.me-puls::after {
    left: 0;
    bottom: .7rem;
    width: 40%;
    transform: rotate(45deg);
}

.product-list .item label input[type="checkbox"]:checked+.me-puls::before {
    right: 0;
    transform: rotate(-45deg);
}

.product-list .item:nth-child(2n+1) {
    margin-right: 2rem;
}